<template>
  <div class="nav-main">
    <el-card style="height: 80px;margin-top: 8px">
      <ul class="ul-container" >
        <router-link to="/discovery/vip_zone"><li :class="type === 1 ? 'active' :''" @click="changeType(1,null)">会员专区</li></router-link>
        <router-link to="/discovery/video_courses"><li :class="type===2 ? 'active' : ''"  @click="changeType(2,null)">视频课</li></router-link>
        <router-link to="/discovery/live_courses"><li :class="type===3? 'active' : ''"  @click="changeType(3,false)">直播课</li></router-link>
        <router-link to="/discovery/major_courses"><li :class="type===4? 'active' : ''" @click="changeType(4,true)">线下课</li></router-link>
        <router-link to="/discovery/zone_list"><li :class="type===5? 'active' : ''" @click="changeType(5,null)">主题</li></router-link>
      </ul>
    </el-card>
      <router-view></router-view>
    </div>
    <BtnAddMore></BtnAddMore>
  <el-backtop :bottom="380" :right="280" >
    <div
      style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
    >
      <img class="scroll-img" src="@/assets/images/back_top@3x.e71cd044.png" />
    </div>
  </el-backtop>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: "Discovery"
})
</script>
<script lang="ts" setup>
import {ref} from "vue"
import {useLiveStore} from "@/store/modules/live";
import {storeToRefs} from "pinia";
const type = ref<number>(0)
const liveStore = useLiveStore()
const {isHidden} = storeToRefs(liveStore)
const changeType = (typeName:number,isHiddenShow:boolean)=>{
    type.value = typeName
    isHidden.value = isHiddenShow
}
</script>
<style lang="scss">
body{
  background-color: #f5f7f9;
}
a{
  text-decoration:none;
  margin:0px 20px;
  color:black;
}
    .ul-container{
      list-style: none;
      display: flex;
      justify-content: center;
      align-items: center;
      height:10px;
      .active{
        padding: 20px 0px;
        color:black;
        border-bottom:2px solid black;
      }
    }
.scroll-img{
  width: 40px;
  height: 40px;
}
</style>
